<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    />
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.ddbh')"
        prop="orderId"
        show-overflow-tooltip
        min-width="160"
      />
      <el-table-column
        align="center"
        :label="$t('message.memberInfo')"
        min-width="240"
        prop="memberInfo"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.tgspmc')"
        prop="name"
        show-overflow-tooltip
        min-width="150"
      />
      <el-table-column
        align="center"
        :label="$t('message.juanma')"
        prop="receipt_code"
        show-overflow-tooltip
        min-width="160"
      />
      <el-table-column
        align="center"
        :label="$t('message.yjzt2')"
        prop="verifyStatus "
        show-overflow-tooltip
        min-width="100"
        fixed="right"
      >
        <template slot-scope="scope">
          {{
            scope.row.verifyStatus == 1
              ? $t('message.ycx')
              :$t('message.yyj')
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.yjsj')"
        prop="verify_time"
        show-overflow-tooltip
        min-width="160"
      />
      <el-table-column
        align="center"
        :label="$t('message.czr')"
        prop="creator"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column :label="$t('message.caozuo')" width="100" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="scope.row.verifyStatus =='0'"
              v-preventReClick
              type="text"
              @click="updateStatus(scope.row)"
            >{{ $t('message.chexiao') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import {
  mtGroupRecord,
  mtCancleVerify
} from '@/api'
import Pagination from '@/components/paginations'
import QueryForm from '@/components/QueryForm'
import { queryFormConfig } from './config'
export default {
  name: 'YjList',
  components: {
    QueryForm,
    Pagination
  },
  data() {
    return {
      queryFormConfig,
      meta: [],
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {},
      listLoading: true
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  methods: {
    updateStatus(e) {
      const that = this
      that
        .$confirm(this.$t('message.cxyjtc'), this.$t('message.ts'), {
          confirmButtonText: this.$t('message.qd'),
          cancelButtonText: this.$t('message.qx'),
          type: 'warning'
        })
        .then(() => {
          mtCancleVerify({ param: { app_deal_id: e.deal_id, receipt_code: e.receipt_code, DealId: e.DealId, orderId: e.orderId, platform: '2' }}).then(
            (res) => {
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.cxyjcg'))
                that.getList(1)
              }
            }
          )
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    clear() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        this.pagination.page = page
        pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      mtGroupRecord({ pagination, param: { venueId, platform: '2', ...this.filters }})
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
